<template>
  <view class="detail-container">
    <view v-if="main">
      <ve-card title="租赁信息" v-if="main">
        <ve-cell label="原预计租赁周期">
          <view>
            {{ main.preStartTime && main.preEndTime ? main.preStartTime + ' 至 ' + main.preEndTime : '-' }}
            <view class="time">原租期：{{ main.preRentDays || '-' }}</view>
          </view>
        </ve-cell>

        <ve-cell label="现预计租赁周期">
          <view>
            {{ main.startTime && main.endTime ? main.startTime + ' 至 ' + main.endTime : '-' }}
            <view class="time">现租期：{{ main.rentDays || '-' }}</view></view
          >
        </ve-cell>
      </ve-card>
      <!-- 续租记录 -->
      <ve-card
        :title="'续租记录 ' + (main.reletList.length - index)"
        v-for="(item, index) in main.reletList"
        :key="item.id"
        type="none"
        fold="true"
        v-model:initFold="item.status"
      >
        <ve-cell label="续租周期">
          <view>
            {{ item.startTime && item.endTime ? item.startTime + '-' + item.endTime : '-' }}
            <view class="time">续租时长：{{ item.rentDays || '-' }}</view>
          </view>
        </ve-cell>
        <ve-cell-val label="续租时间" :value="item.createTime" />
        <ve-cell-price label="续租费" :value="item.totalAmount" />
        <ve-cell-val label="费用状态" :value="item.feeStatusName" />
        <ve-cell-val label="续租备注" :value="item.remark" />
        <template #footer>
          <view class="footer-box" v-if="index === 0">
            <ve-button
              type="plain"
              size="mini"
              v-if="usePermission('svmsapp:order:long-order.relet') && item.operationFlag === 1"
              @click="onClick(item)"
            >
              修改续租
            </ve-button>
            <ve-button
              type="plain"
              size="mini"
              v-if="usePermission('svmsapp:order:long-order.relet') && item.operationFlag === 1"
              @click="onDelete(item)"
            >
              删除续租
            </ve-button>
          </view>
        </template>
      </ve-card>
    </view>
  </view>

  <ve-confirm titleText="提示" v-model="tipVisible" @confirm="confirmHandler"> {{ tipContent }} </ve-confirm>
  <!-- 二次确认 -->
  <ve-confirm titleText="提示" v-model="confirmVisible" @confirm="confirmSubmit" :asyncClose="true"> {{ delReletContent }} </ve-confirm>
</template>
<script setup>
  import { ref } from 'vue'
  import { onShow } from '@dcloudio/uni-app'
  import { getOrdrReletListAPI, deleteReletAPI, reletCheckAPI } from '@/api/order/lOrder'
  import { usePermission } from '@/hooks/usePermission'

  const props = defineProps({
    orderId: {
      type: [String, Number],
    },
  })

  const main = ref([])
  const getDetail = async (id) => {
    const res = await getOrdrReletListAPI({ id: id })
    let result = res.result
    result.reletList = result.reletList.map((item) => {
      return Object.assign({ status: false }, item)
    })
    main.value = result
  }

  const curItem = ref({})
  const tipVisible = ref(false)
  const tipContent = ref('友情提示，若需修改费用，请到订单详情-费用信息页')

  const confirmHandler = () => {
    tipVisible.value = false
    uni.navigateTo({
      url: `/pages/order/long-order/components/change-relet?orderId=${props.orderId}&curItem=${JSON.stringify(curItem.value)}`,
    })
  }
  const onClick = (item) => {
    curItem.value = item
    reletCheckAPI({ id: item.id }).then((res) => {
      const { result } = res
      if (result) {
        tipContent.value = '该续租有电子合同，虽然您可以坚持此次操作，但我们建议您回退电子合同状态以保证数据合理准确'
        tipVisible.value = true
      } else {
        // tipContent.value = '友情提示，若需修改费用，请到订单详情-费用信息页'
        uni.navigateTo({
          url: `/pages/order/long-order/components/change-relet?orderId=${props.orderId}&curItem=${JSON.stringify(curItem.value)}`,
        })
      }
    })
  }

  const confirmVisible = ref(false)
  const delReletContent = ref('确定删除该续租记录吗？')

  const confirmSubmit = () => {
    deleteReletAPI({ id: curItem.value.id })
      .then(() => {
        getDetail(props.orderId)
      })
      .finally(() => {
        confirmVisible.value = false
      })
  }

  const onDelete = (item) => {
    curItem.value = item
    reletCheckAPI({ id: item.id }).then((res) => {
      const { result } = res
      if (result) {
        delReletContent.value = '该续租有电子合同，虽然您可以坚持此次操作，但我们建议您回退电子合同状态以保证数据合理准确'
      } else {
        delReletContent.value = '确定删除该续租记录吗？'
      }

      confirmVisible.value = true
    })
  }

  onShow(() => {
    if (props.orderId) {
      getDetail(props.orderId)
    }
  })
</script>

<style lang="scss" scoped>
  .detail-container {
    padding: 24rpx;
  }
  .time {
    font-size: 30rpx;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #3072f6;
    line-height: 44rpx;
  }
  .footer-box {
    display: flex;
    justify-content: right;
    align-items: center;
    height: 100%;

    .ve-button {
      margin-left: 10px;
    }
  }
</style>
